import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';

const TrafficMonitorMeta: IPublicTypeComponentMetadata = {
  componentName: 'TrafficMonitor',
  title: '客流监控',
  category: '监控',
  group: '出行服务',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'hzdz-charts',
    version: '0.1.0',
    exportName: 'TrafficMonitor',
    main: 'src/index.tsx',
    destructuring: true,
    subName: ''
  },
  props: [
    {
      name: 'ref',
      propType: 'object',
    },
    {
      name: 'key',
      propType: 'string',
    },
    {
      name: 'style',
      propType: 'object',
    },
    {
      name: 'className',
      propType: 'string',
    },
    {
      name: 'width',
      propType: 'number',
      description: '组件宽度'
    },
    {
      name: 'height',
      propType: 'number',
      description: '组件高度'
    },
    {
      name: 'title',
      propType: 'string',
      description: '标题'
    },
    {
      name: 'titleColor',
      propType: 'string',
      description: '标题颜色'
    },
    {
      name: 'dateSelector',
      propType: 'object',
      description: '日期选择器配置'
    },
    {
      name: 'cards',
      propType: 'array',
      description: '监控卡片'
    },
    {
      name: 'theme',
      propType: 'string',
      description: '主题'
    },
    {
      name: 'onDateChange',
      propType: 'func',
      description: '日期变化事件'
    },
    {
      name: 'onCardClick',
      propType: 'func',
      description: '卡片点击事件'
    }
  ],
  configure: {
    props: [
      {
        name: 'title',
        title: '标题',
        setter: 'StringSetter',
        defaultValue: '客流相机'
      },
      {
        name: 'titleColor',
        title: '标题颜色',
        setter: 'ColorSetter',
        defaultValue: '#FFFFFF'
      },
      {
        name: 'dateSelector.dayText',
        title: '日文字',
        setter: 'StringSetter',
        defaultValue: '日'
      },
      {
        name: 'dateSelector.monthText',
        title: '月文字',
        setter: 'StringSetter',
        defaultValue: '月'
      },
      {
        name: 'dateSelector.yearText',
        title: '年文字',
        setter: 'StringSetter',
        defaultValue: '年'
      }
    ],
    supports: {
      style: true
    }
  }
};

const snippets: IPublicTypeSnippet[] = [
  {
    title: '客流监控',
    screenshot: '',
    schema: {
      componentName: 'TrafficMonitor',
      props: {
        width: 504,
        title: '客流相机',
        titleColor: '#FFFFFF',
        titleFontSize: 16,
        titleFontFamily: 'SourceHanSansSC',
        titleFontWeight: 400,
        titleLineHeight: '22px',
        dateSelector: {
          dayText: '日',
          monthText: '月',
          yearText: '年',
          dayBgImage: 'http://localhost:8085/static/images/chuxingfuwu/bj22.png',
          selectorBgColor: 'rgba(5,18,34,0.2)',
          selectorBorderColor: '#3A4E74',
          textColor: 'rgba(255,255,255,0.9)',
          fontSize: 14,
          fontFamily: 'SourceHanSansSC',
          fontWeight: 400,
          lineHeight: '20px'
        },
        cards: [
          {
            id: 'east-exit',
            title: '东出站口',
            imagePath: 'http://localhost:8085/static/images/chuxingfuwu/dczk.png',
            backgroundImage: 'http://localhost:8085/static/images/chuxingfuwu/123456.png'
          },
          {
            id: 'west-exit',
            title: '西出站口',
            imagePath: 'http://localhost:8085/static/images/chuxingfuwu/xczk.png',
            backgroundImage: 'http://localhost:8085/static/images/chuxingfuwu/123457.png'
          },
          {
            id: 'south-exit',
            title: '南出站口',
            imagePath: 'http://localhost:8085/static/images/chuxingfuwu/xczk.png',
            backgroundImage: 'http://localhost:8085/static/images/chuxingfuwu/123457.png'
          },
          {
            id: 'north-exit',
            title: '北出站口',
            imagePath: 'http://localhost:8085/static/images/chuxingfuwu/dczk.png',
            backgroundImage: 'http://localhost:8085/static/images/chuxingfuwu/123456.png'
          },
        ],
        cardTextColor: '#CCCCCC',
        cardFontSize: 16,
        cardFontFamily: 'SourceHanSansSC',
        cardFontWeight: 500,
        cardLineHeight: '16px',
        theme: 'dark'
      }
    }
  }
];

export default {
  ...TrafficMonitorMeta,
  snippets
};
